<!--
 * @Date: 2024-03-20 13:42:49
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-03-20 13:53:28
 * @Description: 
-->
<template>
	<rk-dialog
    width="60%"
    height="75%"
    title="移动菜单"
    :visible="visible"
    :destroyOnClose="true"
    @close="modelHide"
    :maskClosable="false"
  >
		<template #default>
			<div class="move-menu-warpper">
        <div class="select-menu-info">
          <span>将选择菜单：【{{ moveStore.checkedRow.menuAlias }}】</span>
          <span v-if="moveStore.checkedTreeItem"> >>>>>>>>>>> 移动到：【{{ moveStore.checkedTreeItem.menuAlias || moveStore.checkedTreeItem.menuName }}】 节点下</span>
        </div>
        <div class="select-menu-tree">
          <RkMenuTree border @currentChange="treeNodeChange"/>
        </div>
      </div>
		</template>
		<template #footer>
			<el-button type="primary" @click="handleConfirm">确定</el-button>
			<el-button @click="handleClose">取消</el-button>
		</template>
	</rk-dialog>
</template>

<script setup>
import XEUtils from 'xe-utils';
import { ElMessage } from 'element-plus';
import { RkMenuTree } from '@/components/tree';
import { useMenuApi } from '@/api';

const { addMenu, updateMenu } = useMenuApi();

const emits = defineEmits(['confirm', 'close'])

const moveStore = reactive({
  checkedRow: {},
  checkedTreeItem: null
})

const treeNodeChange = (data, treeNode) => {
	moveStore.checkedTreeItem = XEUtils.clone(data, true);
};

const visible = ref(false)

const modelHide = () => {
  visible.value = false
}
const handleOpen = (row) => {
  visible.value = true
  moveStore.checkedRow = XEUtils.clone(row, true)
}
const handleClose = () => {
  modelHide()
  emits('close')
}
const handleConfirm = () => {
  if (!moveStore.checkedTreeItem) {
    ElMessage.warning('请选择需要移动的节点！');
    return
  }
  const formData = XEUtils.clone(moveStore.checkedRow, true)

  const oldMenuCode = formData.menuCode
  const oldParentId = formData.parentId

  const newParentId = moveStore.checkedTreeItem.menuCode
  let newMenuCode = oldMenuCode.replace(oldParentId, '')
  newMenuCode = newParentId + newMenuCode

  formData.menuCode = newMenuCode
  formData.parentId = newParentId
  console.log('formData', formData, moveStore.checkedTreeItem)
  // updateMenu(formData).then((res) => {
  //   const { code, msg } = res;
  //   if (code === 200) {
  //     ElMessage.success('移动成功！');
  //     modelHide()
  //     emits('confirm')
  //   } else {
  //     ElMessage.error(msg);
  //   }
  // }).catch((err) => {
  //   console.error(err);
  //   ElMessage.error('移动失败！');
  // });
}

defineExpose({
  handleOpen
})

</script>

<style lang="scss">
.move-menu-warpper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .select-menu-info {
    height: 20px;
    margin-bottom: 5px;
  }
  .select-menu-tree {
    flex: 1;
    height: 1px;
  }
}
</style>
